import ReactDOM from "react-dom/client";
import './Message.css'

interface ToastType{
  container: HTMLDivElement
  root: ReactDOM.Root
}

// eslint-disable-next-line react-refresh/only-export-components
const Message = () => {
  return <div>Hello World</div>
}
const toasts: ToastType[] = []
window.showMessage = () => {
  const messageContainer = document.createElement('div')
  messageContainer.className = 'message'
  messageContainer.style.top = `${10 +toasts.length * 50}px`
  messageContainer.style.color = '#000'
  document.body.appendChild(messageContainer)
  const root = ReactDOM.createRoot(messageContainer)
  root.render(<Message />)
  toasts.push({
    container: messageContainer,
    root
  })
  setTimeout(() => {
    const toast = toasts.find(t => t.container === messageContainer)!
    toast.root.unmount()
    document.body.removeChild(toast.container)
    toasts.splice(toasts.indexOf(toast), 1)
  }, 2000)
}

declare global {
  interface Window {
    showMessage: () => void
  }
}